﻿@using XiangDongClub.Model
@model ZT_Shop
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html">
    <title>享动运动季</title>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/layer/mobile/need/layer.css" rel="stylesheet" />
    <link href="~/Content/share.css?v=1" rel="stylesheet" />

</head>
<body>

    <div class="aaa">
        <div class="tiyanquan">
            <img class="tiyan-back" src="../image/current/tiyan-bakground.png" alt="" />
            <div class="logo">
                <img src="http://fuwu.xdjsclub.com/Shops/images/@(Model.ImgLogo)/logo.jpg" alt="" />
            </div>
            <div class="tiyan-name">
                <p class="club-name">@(Model.ShopName)（@Model.CityName）</p>
                <p class="club-address">
                    <img src="../image/current/place.png" alt="" />
                    <span>@Model.UseShop</span>
                </p>
            </div>
            <div class="tiyan-type">
                @Model.TicketName
            </div>
        </div>
        <div class="container">
            <div class="slide-frame">
                <ol>
                    <li>点击“为好友加油”助力好友得大奖！</li>
                    <li>点击“我也要领券”进入活动页面，领取运动豪礼！</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="cheer">
        <img class="cheer-title" src="../image/current/paibian.png" alt="" />
        <img class="man" src="../image/current/man.png" alt="" />
        <div class="count">
            <img class="kedu" src="../image/current/temperature-up.png" alt="" />
            <div class="count-icon">

            </div>
        </div>
    </div>
    <p class="count-text">
        已有<span class="count-number">@ViewBag.HelpCount</span>人为 ta 打气加油
    </p>
    <div class="foot">
        <div onclick="showWantFrame()">
            <img src="../image/share/btn-left.png" alt="我也要体验" />
        </div>
        <div onclick="fighting()">
            <img src="../image/share/btn-right.png" alt="为好友加油" />
        </div>
    </div>
    <div class="want-frame">
        <div class="want">
            <div class="want-content">
                <img src="../image/share/mobbilelogo.png" alt="" />
                <p>去“四川移动掌上营业厅”APP 参加活动</p>
            </div>

        </div>
        <div class="want-btn" onclick="closeWantFrame()">
            <img src="../image/share/wantbtn.png" alt="" />
        </div>
    </div>
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/layer/layer.js"></script>
    <script src="~/Scripts/Framework/JsOPP.js"></script>
    <script>
     var phone = getUrlParam("p");
     var openid = getUrlParam("openid");
    $(function () {
        count();
      });
	function fighting(){
	    $.post("/HeShengHuo/FightingMethod", { 'p': phone, 'openId': openid }, GetFightingMethodResponse);
	}

    function GetFightingMethodResponse(data) {
        if (data.Success) {
            var val = $(".count-number").text();
            $(".count-number").text(parseInt(val) + 1);
            count();
        }
        layer.msg(data.Message);
    }
    //    柱状图随人数增加而增加
    function count() {
        var val = $(".count-number").text();
        var icon = $(".count-icon");
        icon.height(val * 5.5);
        if (val < 15) {
            $(".cheer .man").attr("src", "../image/current/man.png");
        } else if (val >= 15 && val < 30) {
            $(".cheer .man").attr("src", "../image/current/man1.png");
        } else if (val >= 30) {
            icon.css({
                "max-height": "160px",
                "border-top-left-radius": "5px",
                "border-top-right-radius": "5px"
            });
            $(".cheer .man").attr("src", "../image/current/man3.png");
        }
    }
	 var ModalHelper = (function(bodyCls) {
        var scrollTop;
        return {
            afterOpen: function() {
                scrollTop = document.scrollingElement.scrollTop;
                document.body.classList.add(bodyCls);
                document.body.style.top = -scrollTop + 'px';
            },
            beforeClose: function() {
                document.body.classList.remove(bodyCls);
                // scrollTop lost after set position:fixed, restore it back.
                document.scrollingElement.scrollTop = scrollTop;
            }
        };
    })('modal-open');
    function showWantFrame(){
        $(".want-frame").show();
        ModalHelper.afterOpen();
    }
    function closeWantFrame(){
        $(".want-frame").hide();
        ModalHelper.beforeClose();
    }

    </script>
</body>
</html>